<template>
  <div class="external-check-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>外部查重网站</h2>
      <p>选择以下权威查重平台进行论文检测</p >
    </div>

    <!-- 查重网站网格 -->
    <div class="check-methods-grid">
      <div
        v-for="method in externalCheckMethods"
        :key="method.id"
        class="method-card"
        :style="{ borderLeftColor: method.color }"
        @click="openExternalWebsite(method.url)"
      >
        <div class="method-header">
          <div class="method-icon" :style="{ backgroundColor: method.color }">
            <component :is="method.icon" />
          </div>
          <div class="method-info">
            <h3>{{ method.name }}</h3>
            <p>{{ method.description }}</p >
          </div>
        </div>
        
        <div class="method-tags">
          <el-tag
            v-for="(tag, index) in method.tags"
            :key="index"
            size="small"
            :style="{ borderColor: method.color, color: method.color }"
            effect="plain"
          >
            {{ tag }}
          </el-tag>
        </div>

        <div class="method-action">
          <el-button
            type="primary"
            :style="{
              backgroundColor: method.color,
              borderColor: method.color
            }"
            @click.stop="openExternalWebsite(method.url)"
          >
            <el-icon><Link /></el-icon>
            访问网站
          </el-button>
        </div>
      </div>
    </div>

    <!-- 使用说明 -->
    <el-card class="usage-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon size="20" color="#409EFF">
            <InfoFilled />
          </el-icon>
          <span>使用说明</span>
        </div>
      </template>

      <div class="usage-content">
        <div class="usage-item">
          <el-icon color="#67C23A"><Check /></el-icon>
          <span>点击卡片或"访问网站"按钮跳转到对应查重平台</span>
        </div>
        <div class="usage-item">
          <el-icon color="#E6A23C"><Warning /></el-icon>
          <span>不同平台的收费标准和服务内容可能有所不同</span>
        </div>
        <div class="usage-item">
          <el-icon color="#409EFF"><Promotion /></el-icon>
          <span>建议根据学校要求和自身需求选择合适的查重平台</span>
        </div>
        <div class="usage-item">
          <el-icon color="#909399"><Clock /></el-icon>
          <span>查重高峰期可能需要排队，建议提前准备</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  School,
  Document,
  MapLocation,
  Trophy,
  Star,
  Promotion,
  Link,
  InfoFilled,
  Check,
  Warning,
  Clock,
  Reading,
  Collection,
  Search,
  Monitor,
  DataBoard,
  DataAnalysis,
  EditPen
} from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

// 外部查重方法数据
const externalCheckMethods = ref([
  {
    id: 1,
    name: '中国知网查重',
    description: '国内最权威的学术不端检测系统，高校普遍采用',
    url: 'https://check.cnki.net/',
    icon: School,
    color: '#E64A19',
    tags: ['权威', '高校认可', '官方']
  },
  {
    id: 2,
    name: '万方数据查重',
    description: '万方数据推出的论文相似性检测服务',
    url: 'https://check.wanfangdata.com.cn/',
    icon: Document,
    color: '#1976D2',
    tags: ['官方', '可靠', '快速']
  },
  {
    id: 3,
    name: '维普查重',
    description: '维普论文检测系统，覆盖国内外文献资源',
    url: 'https://vpcs.cqvip.com/',
    icon: MapLocation,
    color: '#388E3C',
    tags: ['国际', '全面', '准确']
  },
  {
    id: 4,
    name: 'Turnitin',
    description: '国际权威学术不端检测系统，支持多语言',
    url: 'https://www.turnitin.com/',
    icon: Trophy,
    color: '#7B1FA2',
    tags: ['国际', '权威', '多语言']
  },
  {
    id: 5,
    name: 'PaperPass',
    description: '专业的论文查重平台，检测准确度高',
    url: 'https://www.paperpass.com/',
    icon: Star,
    color: '#F57C00',
    tags: ['专业', '准确', '快速']
  },
  {
    id: 6,
    name: '大雅相似度分析',
    description: '超星集团推出的论文检测系统',
    url: 'http://dsa.dayainfo.com/',
    icon: Promotion,
    color: '#0097A7',
    tags: ['免费', '便捷', '超星']
  },
  {
    id: 7,
    name: 'iThenticate',
    description: '国际顶级SCI论文查重系统，适用于英文论文',
    url: 'https://www.ithenticate.com/',
    icon: Reading,
    color: '#9C27B0',
    tags: ['SCI', '国际', '英文']
  },
  {
    id: 8,
    name: 'PaperRight',
    description: '专业的论文查重系统，支持多语种检测',
    url: 'https://www.paperright.com/',
    icon: Collection,
    color: '#FF5722',
    tags: ['多语种', '专业', '准确']
  },
  {
    id: 9,
    name: 'WriteCheck',
    description: 'Turnitin旗下针对学生的论文查重服务',
    url: 'https://en.writecheck.com/',
    icon: EditPen,
    color: '#2196F3',
    tags: ['学生版', 'Turnitin', '英文']
  },
  {
    id: 10,
    name: 'Grammarly',
    description: '英文语法检查和抄袭检测一体化平台',
    url: 'https://www.grammarly.com/',
    icon: Search,
    color: '#15C39A',
    tags: ['英文', '语法检查', '抄袭检测']
  },
  {
    id: 11,
    name: 'Copyleaks',
    description: '基于AI的抄袭检测系统，支持130多种语言',
    url: 'https://copyleaks.com/',
    icon: DataAnalysis,
    color: '#FF6B35',
    tags: ['AI检测', '多语言', '准确']
  },
  {
    id: 12,
    name: 'PlagScan',
    description: '专业的在线抄袭检测工具，被多所高校采用',
    url: 'https://www.plagscan.com/',
    icon: Monitor,
    color: '#4361EE',
    tags: ['专业', '高校采用', '可靠']
  },
  {
    id: 13,
    name: 'PlagiarismCheck',
    description: '全面的抄袭检测系统，支持深度分析',
    url: 'https://plagiarismcheck.org/',
    icon: DataBoard,
    color: '#7209B7',
    tags: ['深度分析', '全面', '专业']
  },
  {
    id: 14,
    name: '百度学术查重',
    description: '百度学术推出的论文查重服务平台',
    url: 'https://xueshu.baidu.com/usercenter/papercheck/',
    icon: Promotion,
    color: '#2932FF',
    tags: ['百度', '便捷', '免费']
  },
  {
    id: 15,
    name: '笔杆网',
    description: '专业的论文写作辅导和查重平台',
    url: 'https://www.bigan.net/',
    icon: EditPen,
    color: '#00B4D8',
    tags: ['写作辅导', '查重', '专业']
  }
])

// 打开外部网站
const openExternalWebsite = (url) => {
  window.open(url, '_blank')
  ElMessage.success('正在跳转到外部查重网站...')
}

// 设置页面标题
appStore.setPageTitle('外部查重网站')
appStore.setBreadcrumbs([
  { title: '学生中心', path: '/student' },
  { title: '外部查重网站', path: '/student/external-check' }
])
</script>

<style scoped>
.external-check-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
}

.page-header h2 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.check-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.method-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border-left: 4px solid;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
  height: fit-content;
}

.method-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.method-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.method-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.method-icon svg {
  width: 24px;
  height: 24px;
}

.method-info h3 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.method-info p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.method-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.method-action {
  text-align: right;
}

.method-action .el-button {
  font-weight: 500;
}

.usage-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 24px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.usage-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.usage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #606266;
  font-size: 14px;
}

.usage-item .el-icon {
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .external-check-container {
    padding: 16px;
  }
  
  .check-methods-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .method-card {
    padding: 20px;
  }
  
  .method-header {
    flex-direction: column;
    text-align: center;
  }
  
  .method-icon {
    align-self: center;
  }
  
  .method-tags {
    justify-content: center;
  }
  
  .method-action {
    text-align: center;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .check-methods-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>